<template>
<div style="width:1880px; height:980px;">

	<div class="s1">
		<div class="t1">
			<div class="title">
				<div class="shuxian"></div>
				<div class="wenzi">
					事件办理情况
				</div>
			</div>
			<el-form :inline="true" :model="form"  class="ml15">
				<el-form-item >

					<el-date-picker
				      v-model="f1.start_time"
				      type="date"
				      format="yyyy-MM-dd"
				      value-format="yyyy-MM-dd"
				      placeholder="开始日期"
				      style="width:243px;">
				    </el-date-picker>
				    	<span class="ml10 mr10" style="color:#fff;">至</span>
				    <el-date-picker
				      v-model="f1.end_time"
				      type="date"
				      format="yyyy-MM-dd"
				      value-format="yyyy-MM-dd"
				      placeholder="结束日期"
				      style="width:243px;">
				    </el-date-picker>

			    </el-form-item>

				<el-form-item >
				    <el-cascader 
						style="width:440px;"
						filterable
						:options="treedata"
						:props="props1"
						filterable
						change-on-select
						v-model="selectedOptions1">
						</el-cascader>
				</el-form-item>

				<el-form-item>
				    <el-button type="primary" class="btn" @click="s1">查询</el-button>
				</el-form-item>
				
			</el-form>
			<div >
				<v-chart style="width:500px;" class="ml25" :options="option1" />
			</div>
		</div>

		<div class="t2">
			<div class="title">
				<div class="shuxian"></div>
				<div class="wenzi">
					污染统计
				</div>
			</div>

			<div>
				<v-chart style="width:550px;height:350px;" :options="option2" />
			</div>
		</div>

	</div>

	<div class="s20">
	<div class="s2">
		<div class="t3">
			<div class="title">
				<div class="shuxian"></div>
				<div class="wenzi">
					绩效管理
				</div>
			</div>

			<el-form :inline="true" :model="f2"  class="ml15">

				<el-form-item >

					<el-date-picker
				      v-model="f2.start_time"
				      type="date"
				      format="yyyy-MM-dd"
				      value-format="yyyy-MM-dd"
				      placeholder="开始日期"
				      style="width:200px;">
				    </el-date-picker>
				    	<span class="ml10 mr10" style="color:#fff;">至</span>
				    <el-date-picker
				      v-model="f2.end_time"
				      type="date"
				      format="yyyy-MM-dd"
				      value-format="yyyy-MM-dd"
				      placeholder="结束日期"
				      style="width:200px;">
				    </el-date-picker>

			    </el-form-item>

				<el-form-item >
				    <el-select v-model="f2.type"  placeholder="企业类型"
				    style="width:150px;"
				    >
				      <el-option label="县级" value="2"></el-option>
				      <el-option label="镇级" value="3"></el-option>
				      <el-option label="网格员" value="9"></el-option>
				    </el-select>
				</el-form-item>

				<el-form-item>
				    <el-button type="primary" class="btn" @click="s2">查询</el-button>
				</el-form-item>
				
			</el-form>

			<div>
				<v-chart style="width:750px;" :options="option3" />
			</div>
		</div>
	</div>

	<div class="s4">
		<el-table
	    :data="list"
	    :header-cell-style="{
			'background-color': '#169098',
		    'color': '#75F28E',    
		}"
		height="450px"
		size="mini"
	    style="width: 100%">
	    	<el-table-column
		      type="index"
		      label="排名"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="行政区划"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="wgnum"
		      label="网格数"
		      align="center"
		      v-if="f2.type != '9'"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="zsnum"
		      label="事件总数"
		      align="center"
		      v-if="f2.type != '9'"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="dbnum"
		      label="待办结"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="ybnum"
		      label="已办结"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="bjl"
		      label="办结率"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="csnum"
		      label="超时数"
		      align="center"
		      class-name="red"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="csl"
		      label="超时率"
		      align="center"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="sbnum"
		      label="上报人数"
		      align="center"
		      v-if="f2.type != '9'"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="wgynum"
		      label="用户总数"
		      align="center"
		      v-if="f2.type != '9'"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="sbl"
		      label="上报率"
		      align="center"
		      v-if="f2.type != '9'"
		      >
		    </el-table-column>
	  	</el-table>
	</div>
	</div>

	<div class="s3">
		<div class="t4">
			<div class="title">
				<div class="shuxian"></div>
				<div class="wenzi">
					网格企业统计
				</div>
			</div>
			<el-form :inline="true" :model="f3"  class="ml15">

				<el-form-item >
				    <el-cascader 
						style="width:400px;"
						filterable
						:options="treedata"
						:props="props1"
						filterable
						change-on-select
						v-model="selectedOptions2">
						</el-cascader>
				</el-form-item>

				<!-- <el-form-item >
					<el-select v-model="f3.type"  placeholder="企业类型" style="width:200px;">
				      <el-option 
				      v-for="item in company_type"
				      :label="item.label" :value="item.value"></el-option>
				    </el-select>
				</el-form-item> -->

				<!-- <el-form-item >

				    <el-select v-model="form.type"  placeholder="企业类型"
				    style="width:200px;"
				    >
				      <el-option label="县级" value="2"></el-option>
				      <el-option label="镇级" value="3"></el-option>
				      <el-option label="网格员" value="9"></el-option>
				    </el-select>
				</el-form-item> -->

				<el-form-item>
				    <el-button type="primary" class="btn" @click="s3"
				    style="width:100px;"
				    >查询</el-button>
				</el-form-item>
				
			</el-form>

			<div>
				<v-chart style="width:500px;margin-left:50px;" :options="option4" />
			</div>
		</div>

		<div class="t5">
			<div class="title">
				<div class="shuxian"></div>
				<div class="wenzi">
					企业类别
				</div>
			</div>
			<div>
				<v-chart style="width:540px;height:300px;" :options="option5" />
			</div>
			
		</div>

		<div class="t6">
			<div class="title">
				<div class="shuxian"></div>
				<div class="wenzi">
					本月空气AQI日历
				</div>
			</div>

			<div>
				<v-chart style="width:450px;height:240px; margin-left:45px;
				border:1px solid #169098; padding:10px;" :options="option6" />
			</div>

		</div>
	</div>

</div>
</template>

<script>

import ECharts from 'vue-echarts'

import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/chart/heatmap'
import 'echarts/lib/chart/custom'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/calendar'
import 'echarts/lib/component/visualMap'

import daterange from '@/components/daterange'

export default {
	
	name : 'statistics',
	
	data () {
		return {

			mock : false,

			f1 : {
				start_time : '2019-03-01',

				end_time : this.$util.date2str(new Date()),
			},

			f2 : {
				start_time : '2019-03-01',

				end_time : this.$util.date2str(new Date()),

				type : '2',
			},

			f3 : {

			},

			company_type : [],

			form : {
				type : '2',

				start_time : this.$util.date2str(new Date()),

				end_time : this.$util.date2str(new Date()),
			},


			treedata : [],

		  	props1 : {
				value : 'id',
				label : 'name',
			},

			selectedOptions1 : ['1', '5937232f-50f3-11e9-b3be-0242ac11001d'],
			selectedOptions2 : ['1', '5937232f-50f3-11e9-b3be-0242ac11001d'],

			list : [],

		  	option1 : {
		  		legend: {
			        data : [
			        	{
			        		name : '已办理',
			        		icon: 'circle',
			        		textStyle : {
			        			color : '#66F183'
			        		},
			        	},
			        	{
			        		name : '待办理',
			        		icon: 'circle',
			        		textStyle : {
			        			color : '#E18258'
			        		},
			        	},
			        	{
			        		name : '办结率',
			        		icon: 'circle',
			        		textStyle : {
			        			color : '#1AD7D0'
			        		},
			        	}
			        ],

			        selectedMode : false,
			    },
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'line',
			        },
			        formatter: function (params) {
			            var ybl = params[0];
			            var dbl = params[1];
			            var bjl = params[2];
			            return ybl.name + '<br/>' + 
			            ybl.seriesName + ' : ' + ybl.value + '<br/>' +
			            dbl.seriesName + ' : ' + dbl.value + '<br/>' +
			            bjl.seriesName + ' : ' + bjl.value + ' %';
			        }
			        //formatter : '{b0}: {c0}<br />{b1}: {c1}<br />{b2}: {c2}'
			    },

			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			        data : [],
			        axisLine: {
		                lineStyle: {
		                    color: '#fff',
		                }
		            },
		            axisLabel : {
		            	interval : 0,
		            },

			    },
			    yAxis: [
			    	{
    			        type: 'value',
    			        name: '事件总数量',
    			        axisLine: {
    		                lineStyle: {
    		                    color: '#11AD95',
    		                }
    		            },
    		            axisLabel: {
			                formatter: '{value} 个'
			            },
			            minInterval: 1,
    			    },
    			    {
			            type: 'value',
			            name: '办结率',
			            min: 0,
			            max: 100,
			            axisLabel: {
			                formatter: '{value} %'
			            },
			            splitLine : {
			            	show : false,
			            },
			            axisLine: {
    		                lineStyle: {
    		                    color: '#11AD95',
    		                }
    		            },
			        }
			    ],
			    series: [
				    {
				    	name : '已办理',
				        //data: [420, 532, 601, 34, 590, 230, 120],
				        data : [],
				        type: 'line',
				        itemStyle : {
				        	color : '#66F183',
				        },
				        lineStyle : {
				        	color : '#66F183',
				        },
				        areaStyle: {
				        	color : '#66F183',
				        },
				        smooth: true
				    },
				    {
				    	name : '待办理',
				        //data: [520, 332, 701, 134, 290, 330, 720],
				        data : [],
				        type: 'line',
				        itemStyle : {
				        	color : '#E18258',
				        },
				        lineStyle : {
				        	color : '#E18258',
				        },
				        areaStyle: {
				        	color : '#E18258',
				        },
				        smooth: true
				    },
				    {
				    	name : '办结率',
				    	yAxisIndex: 1,
				        //data: [20, 32, 30, 43, 69, 73, 32],
				        data : [],
				        type: 'line',
				        itemStyle : {
				        	color : '#1AD7D0',
				        },
				        lineStyle : {
				        	color : '#1AD7D0',
				        },
				        areaStyle: {
				        	color : '#1AD7D0',
				        },
				        smooth: true
				    }
			    ]
			},

			option2 : {
				color : ['#A1A6F7', '#FF677E', '#FF9A69', '#75F28E', '#25CCB8', '#3ED3EB', '#17B5F6'],
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        x : 'center',
			        y : 'bottom',
			        top : '85%',
			        data : [
			        	// {
			        	// 	name : '水污染',
			        	// 	textStyle : {
			        	// 		color : '#A1A6F7'
			        	// 	},
			        	// },
			        	// {
			        	// 	name : '大气污染',
			        	// 	textStyle : {
			        	// 		color : '#FF677E'
			        	// 	},
			        	// },
			        	// {
			        	// 	name : '固废污染',
			        	// 	textStyle : {
			        	// 		color : '#FF9A69'
			        	// 	},
			        	// },
			        	// {
			        	// 	name : '噪声污染',
			        	// 	textStyle : {
			        	// 		color : '#75F28E'
			        	// 	},
			        	// },
			        	// {
			        	// 	name : '其他污染',
			        	// 	textStyle : {
			        	// 		color : '#25CCB8'
			        	// 	},
			        	// },
			        	// {
			        	// 	name : '辐射污染',
			        	// 	textStyle : {
			        	// 		color : '#3ED3EB'
			        	// 	},
			        	// },
			        	// {
			        	// 	name : '生态环境污染',
			        	// 	textStyle : {
			        	// 		color : '#17B5F6'
			        	// 	},
			        	// },
			        	
			        ],
			    },
			    calculable : true,
			    series : [
			        {
			            name:'问题统计',
			            type:'pie',
			            radius : [30, 110],
			            center : ['50%', '40%'],
			            roseType : 'area',
			            data:[
			                // {value:10, name:'水污染'},
			                // {value:5, name:'大气污染'},
			                // {value:15, name:'固废污染'},
			                // {value:25, name:'噪声污染'},
			                // {value:20, name:'其他污染'},
			                // {value:35, name:'辐射污染'},
			                // {value:30, name:'生态环境污染'},
			            ]
			        }
			    ]
			},



			option3 : {
				color : ['#25CCB8', '#FF9A69'],
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {
			            type : 'shadow'
			        }
			    },
			    legend: {
			        data : [
			        	{
			        		name : '待办结',
			        		textStyle : {
			        			color : '#FF9A69'
			        		},
			        	},
			        	{
			        		name : '已办结',
			        		textStyle : {
			        			color : '#25CCB8'
			        		},
			        	}
			        ]
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis:  {
			        type: 'category',
			        // data: ['旬邑县','杨凌区','长武县','淳化县','秦都区','三原县','乾县', '永寿县', '彬县', '武功县', '兴平县', '渭城区', '泾阳县', '礼泉县'],

			        data : [],
			        axisLine: {
		                lineStyle: {
		                    color: '#fff',
		                }
		            },
		            axisLabel : {
		            	 // rotate : 90,
		            	 // fontSize : 10,
		            	 // align : 'center',
		            	interval : 0,
		            	// lineHeight : 16,
		       //      	rich: {
					    //     a: {
					    //         color: 'red',
					    //         lineHeight: 10
					    //     },
					    // }
		            }
			    },
			    yAxis: {
			        type: 'value',
			        axisLine: {
		                lineStyle: {
		                    color: '#fff',
		                }
		            },
		            axisLabel: {
		                formatter: '{value} 个'
		            },
		            minInterval: 1,
			    },
			    series: [
			        
			        {
			            name: '已办结',
			            type: 'bar',
			            stack: '总量',
			            barMaxWidth : 20,
			            // data: [120, 132, 101, 134, 90, 230, 210, 320, 302, 301, 334, 390, 30, 32]
			            data : [],
			        },
			        {
			            name: '待办结',
			            type: 'bar',
			            stack: '总量',
			            barMaxWidth : 20,
			            // data: [20, 30, 301, 334, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210]
			            data : [],
			        },
			    ]
			},


			option4 : {
				//color : ['#25CCB8', '#17B5F6'],
				color : ['#A1A6F7', '#FF677E', '#FF9A69', '#75F28E', '#25CCB8', '#3ED3EB', '#17B5F6'],
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			    	type : 'scroll',
			        orient: 'vertical',
			        // x: 'left',
			        left: 10,
			        top: 10,
			        bottom: 215,
			        pageIconColor : '#fff',
			        pageTextStyle : {
			        	color : '#fff',
			        },
			        // data:['旬邑县','其他']
			        data : [
			        	// {
			        	// 	name : '旬邑县',
			        	// 	textStyle : {
			        	// 		color : '#25CCB8'
			        	// 	},
			        	// },
			        	// {
			        	// 	name : '其他',
			        	// 	textStyle : {
			        	// 		color : '#17B5F6'
			        	// 	},
			        	// },
			        ]
			    },
			    series: [
			        {
			            name:'企业统计',
			            type:'pie',
			            center: ['50%', '25%'],
			            radius: ['25%', '40%'],
			            avoidLabelOverlap: false,
			            label: {
			                normal: {
			                    show: false,
			                    position: 'center'
			                },
			                emphasis: {
			                    show: true,
			                    textStyle: {
			                        fontSize: '20',
			                        fontWeight: 'bold',
			                    },
			                    formatter: "{b}\r\n{c}个"
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:[
			                // {value:6, name:'旬邑县'},
			                // {value:20, name:'其他'},
			            ]
			        }
			    ]
			},


			option5 : {
				color : ['#1FDCB6'],
			    // tooltip: {
			    //     trigger: 'axis',
			    //     axisPointer: {
			    //         type: 'shadow'
			    //     }
			    // },
			    // legend: {
			    //     data: ['2011年']
			    // },
			    // center: ['50%', '25%'],
			    grid: {
			        left: '5%',
			        // right: '5%',
			        top: '0',
			        // bottom: '2%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'value',
			        show: false,
			        // boundaryGap: [0, 0.01],
			        
		         
		         //    axisLabel: {
		         //    	show: false,
		         //    },
		         //    splitLine : {
		         //    	show: false,
		         //    },
			    },
			    yAxis: {
			        type: 'category',
			        //data: ['工业企业','餐饮企业','禽畜养殖','施工工地','各类道路','各类焚烧', '公共水体', '其他类别'],
			        data : [],
			        axisLine: {
			        	show: false,
		                lineStyle: {
		                    color: '#fff',
		                },
		            },
	                axisTick : {
		            	show: false,
		            },
		            nameTextStyle : {
		            	fontSize : 30,
		            }
			    },
			    series: [
			    	{ // For shadow
			            type: 'bar',
			            itemStyle: {
			                normal: {color: 'rgba(58,86,133,1)'}
			            },
			            barMaxWidth : 10,
			            barGap:'-100%',
			            //data: [10, 10, 10, 10, 10, 10, 10, 10],
			            data : [],
			            animation: false,
			            silent: true,
			        },
			        {
			            name: '企业数量',
			            type: 'bar',
			            barMaxWidth : 10,
			            //data: [3, 4, 8, 4, 1, 5, 7, 2],
			            data : [],
			            label: {
		                    show: true,
		                    //position: [400, 0],
		                    position : [],
		                    //position : 'right',
		                    color: '#fff',
		                    formatter: '{c} 个'
			            },
			            color: new ECharts.graphic.LinearGradient(
	                        1, 0, 0, 0,
	                        [
	                            {offset: 0, color: '#32E1F2'},
	                            {offset: 1, color: '#1FDCB6'},
	                            {offset: 1, color: '#20C7BF'}
	                        ]
	                    )
			        },
			    ]
			},



			option6 : {
				visualMap: {
			        // min: 0,
			        // max: 120,
			        // splitNumber : 6,
			        pieces: [
					    {min: 0, max: 50, label : '优' , color : '#79E73C'},	//绿色
					    {min: 51, max: 100, label : '良' , color : '#FFD800'},
					    {min: 101, max: 150, label : '轻度污染' , color : '#FF9000'},
					    {min: 151, max: 200, label : '中度污染' , color : '#FF2A00'},
					    {min: 201, max: 300, label : '重度污染' , color : '#EB007F'},
					    {min: 301, label: '严重污染', color: '#C7021D'}, // 表示 
					],
			        type: 'piecewise',
			        orient: 'horizontal',
			        left: 'center',
			        top: 220,
			        textStyle: {
			            color: '#fff'
			        }
			    },
			    tooltip : {
			    	formatter: function (params) {
	                    return 'AQI：' + params.value[1];
	                },
			    },
			    calendar: [{
			        left: '0',
			        right: '0',
			        top: '40',
			        bottom: '0',
			       	height : 170,
			        cellSize: [50, 'auto'],
			        yearLabel: {show: false},
			        monthLabel: {show: false},
			        orient: 'vertical',
			        dayLabel: {
			        	show: true,
			            nameMap: 'cn',
			            color : '#fff',
			            align: 'center',
			        },
			        itemStyle : {
			        	opacity : 0,
			        	borderWidth : 0,
			        },
			        splitLine : {
			        	show : false,
			        },
			        range: '2019-06'
			    }],
			    series: [
			    	{
				        type: 'scatter',
				        coordinateSystem: 'calendar',
				        symbolSize: 1,
				        label: {
				            // normal: {
				                show: true,
				                // formatter: function (params) {
				                //     var d = ECharts.number.parseDate(params.value[0]);
				                //     return d.getDate() + '\n\n' + params.value[2] + '\n\n';
				                // },
				                textStyle: {
				                    color: '#fff'
				                }
				            // }
				        },
				        data: [
				        	['2019-06-01', 1],
				        	['2019-06-02', 2],
				        	['2019-06-03', 3],
				        	['2019-06-04', 4],
				        	['2019-06-05', 5],
				        	['2019-06-06', 6],
				        	['2019-06-07', 7],
				        	['2019-06-08', 8],
				        	['2019-06-09', 9],
				        	['2019-06-10', 10],
				        	['2019-06-11', 11],
				        	['2019-06-12', 12],
				        	['2019-06-13', 13],
				        	['2019-06-14', 14],
				        	['2019-06-15', 15],
				        	['2019-06-16', 16],
				        	['2019-06-17', 17],
				        	['2019-06-18', 18],
				        	['2019-06-19', 19],
				        	['2019-06-20', 20],
				        	['2019-06-21', 21],
				        	['2019-06-22', 22],
				        	['2019-06-23', 23],
				        	['2019-06-24', 24],
				        	['2019-06-25', 25],
				        	['2019-06-26', 26],
				        	['2019-06-27', 27],
				        	['2019-06-28', 28],
				        	['2019-06-29', 29],
				        	['2019-06-30', 30],
				        ]
				    },

				    {
				        type: 'heatmap',
				        coordinateSystem: 'calendar',
				        data: [
				        	['2019-06-03', 11],
				        	['2019-06-13', 80],
				        	['2019-06-23', 380],
				        ],
				        	label : {
				        		width : 10,
				        	}
				    }

				    // {
				    //     type: 'custom',
				    //     coordinateSystem: 'calendar',
				    //     dimensions: [null, {type: 'ordinal'}],
				    //     data: () => {
				    //     	return [];
				    //     }
				    // }
			    ]
			},




		}
	},

	props : {

	},

	components : {
		'v-chart': ECharts,
		daterange,
	},

	computed : {

	},

	methods : {
		s1 () {

			const day = this.$util.dateDiff(this.f1.start_time, this.f1.end_time);
			if(day < 0){
                this.$message.warning('开始时间不能在结束时间之后。');
                return;
			}

			this.option1.xAxis.data = [];
			this.option1.series[0].data = [];
			this.option1.series[1].data = [];
			this.option1.series[2].data = [];

			this.$http({
				fun : 'eventstatistics',
				requestType : 'get',
				id : this.selectedOptions1[this.selectedOptions1.length - 1],
				start_time : this.f1.start_time + ' 00:00:00',
				end_time : this.f1.end_time + ' 23:59:59',
				cb : res => {
					console.log(res);
					res.forEach(item => {

						let name = item.company_name[0];
						for(let i = 1; i < item.company_name.length; i++){
							name += '\n' + item.company_name[i];
						}

						this.option1.xAxis.data.push(name);
						this.option1.series[0].data.push(item.ybnum);
						this.option1.series[1].data.push(item.dbnum);

						if(item.ybnum == 0){
							this.option1.series[2].data.push(0);
						}else{
							this.option1.series[2].data.push((item.ybnum / item.num * 100).toFixed(2));
						}
					})
				}
			});

			this.option2.legend.data = [];
			this.option2.series[0].data = [];

			this.$http({
				fun : 'questionstatistics',
				requestType : 'get',
				id : this.selectedOptions1[this.selectedOptions1.length - 1],
				start_time : this.f1.start_time + ' 00:00:00',
				end_time : this.f1.end_time + ' 23:59:59',
				cb : res => {
					console.log(res);
					this.list1 = res;
					const len = this.option2.color.length;

					res.forEach((item, index) => {
						this.option2.legend.data.push({
			        		name : item.question_typename,
			        		textStyle : {
			        			color : this.option2.color[index % len]
			        		},
						})
						this.option2.series[0].data.push({
							value : item.num,
							name : item.question_typename
						});
					})
				}
			});
		},


		s2 () {

			const day = this.$util.dateDiff(this.f2.start_time, this.f2.end_time);
			if(day < 0){
                this.$message.warning('开始时间不能在结束时间之后。');
                return;
			}

			this.option3.xAxis.data = [];
			this.option3.series[0].data = [];
			this.option3.series[1].data = [];

			this.$http({
				fun : 'jixiao',
				type : this.f2.type,
				start_time : this.f2.start_time + ' 00:00:00',
				end_time : this.f2.end_time + ' 23:59:59',
				cb : res => {
					console.log(res);
					this.list = res;

					res.forEach((item, index) => {
						// if(index % 2 != 0){
						// 	this.option3.xAxis.data.push('\n' + item.name);
						// }else{
						// 	this.option3.xAxis.data.push(item.name);
						// }

						let name = item.name[0];
						for(let i = 1; i < item.name.length; i++){
							name += '\n' + item.name[i];
						}


						this.option3.xAxis.data.push(name);
						this.option3.series[0].data.push(item.ybnum);
						this.option3.series[1].data.push(item.dbnum);
					})
				}
			});
		},


		s3 () {

			this.option4.legend.data = [];
			this.option4.series[0].data = [];

			this.option5.yAxis.data = [];
			this.option5.series[0].data = [];
			this.option5.series[1].data = [];

			this.$http({
				fun : 'companystatistics',
				id : this.selectedOptions2[this.selectedOptions2.length - 1] + '',
				...this.f3,
				requestType : 'get',
				cb : res => {
					console.log('companystatistics');
					console.log(res);
					const len = this.option4.color.length;
					// this.list = res;
					res.forEach((item, index) => {

						this.option4.legend.data.push({
							name : item.company_name,
			        		textStyle : {
			        			color : this.option4.color[index % len]
			        		},
						});

						this.option4.series[0].data.push({
							name : item.company_name,
							value : item.num,
						})
					})
				}
			});


			this.$http({
				fun : 'companytypelist',
				id : this.selectedOptions2[this.selectedOptions2.length - 1] + '',
				...this.f3,
				requestType : 'get',
				cb : res => {
					console.log('companytypelist');
					console.log(res);

					let count = 0;
					const max = res[0].num + 5;
					let maxlength = 0;
					res.forEach((item, index) => {
						if(index < 7){
							this.option5.yAxis.data.push(item.type_name);
							this.option5.series[0].data.push(max);
							this.option5.series[1].data.push(item.num);

							if(item.type_name.length > maxlength){
								maxlength = item.type_name.length;
							}
						}else{
							count += item.num;
						}
					})

					this.option5.yAxis.data.push('其他');
					this.option5.series[0].data.push(max);
					this.option5.series[1].data.push(count);

					this.option5.series[1].label.position = [ 450 - maxlength * 10, 0];

				}
			})

		},


		init () {


		},
	},

	watch : {
	    
	},

	mounted () {


		this.$http({
			fun : 'grideList',
			type : '1',
			cb : res => {
				console.log(res);
				const result = this.$util.transData(res, 'id', 'parent_id', 'children');
				console.log(result);
				this.treedata = result;

				this.s1();
			}
		});

		this.$http({
			fun : 'getListByType',
			type : 'company_type',
			cb : res => {
				console.log(res);
				this.company_type = res;
				this.company_type.unshift({
					label : '全部',
					value : undefined,
				});

				this.s3();
			}
		});

		this.s2();
		
	},

}
</script>

<style scoped>
.s1, .s3{
	float: left;
	height: 970px;
	background:rgba(8,55,73,0.7);
	/*background-color: #fff;*/
	/*opacity:0.7;*/
}

.s20 {
	float: left;
	width: 760px;
	height: 970px;
	margin-left: 10px;
	margin-right: 10px;
}

.s1 {
	width: 550px;
}

.s2 {
	width: 760px;
	
	height: 520px;
	background:rgba(8,55,73,0.7);
}

.s3 {
	width: 550px;
}

.s4 {
	width: 760px;
	height: 450px;
	background:rgba(8,55,73,1);
	opacity:0.7;
}

.shuxian {
	width:4px;
	height:20px;
	background:rgba(19,227,227,1);
	float: left;
	margin-right: 15px;
	margin-top: 3px;
}

.wenzi {
	font-size:18px;
	font-weight:400;

	color:rgba(255,255,255,1);
}

.title {
	padding-top: 15px;
	padding-left: 15px;
	padding-bottom: 15px;
}

.t1 {
	height: 550px;
}

.t2 {
	height: 420px;
}

.t4 {
	height: 330px;
}

.t5 {
	height: 300px;
}

.t6 {
	height: 340px;
}

.btn {
	background-color: #0A8991;
	border-color: #0A8991;
	border-radius: 0;
}
</style>
